//样式实现文件
$color1:rgb(30, 136, 229); 
$color2: #d3d306;
$color3: #333;
$pad:30px;
$mar:30px;

//字体
@mixin font($size:o, $color:o, $lineHeight:o, $bold:o) {
  @if $size!=o {font-size: $size;}
  @if $color!=o {color: $color;}
  @if $lineHeight!=o {line-height: $lineHeight;}
  @if $bold!=o { font-weight: $bold;}
}

@mixin box($width:o,$height:o,$margin:o,$padding:o,$border:o,$radius:o){
  @if $width!=o {width:$width}
  @if $height!=o {height:$height}
  @if $margin!=o {margin:$margin}
  @if $padding!=o {padding:$padding}
  @if $border!=o {border:$border}
  @if $radius!=o {border-radius:$radius}
}
@mixin  border($border:o,$radius:o) {
  @if $border!=o {border:$border}
  @if $radius!=o {border-radius:$radius}
}

//文本行缩进与对齐方向
@mixin tline( $num:o,$direction:o) {
  @if $direction==left {
    text-align: left;
    // @extend .tleft;
  }

  @else if $direction==center {
    text-align: center;
    // @extend .tcenter;
  }

  @else if $direction==right {
    text-align: right;
    // @extend .tright;
  }

  @if $num==1 {
    overflow: hidden;
    white-space: nowrap;
    text-overflow: ellipsis;
  }

  @else if $num>0 {
    text-overflow: -o-ellipsis-lastline;
    overflow: hidden;
    text-align: left;
    text-overflow: ellipsis;
    display: -webkit-box;
    -webkit-line-clamp: $num;
    line-clamp: $num;
    -webkit-box-orient: vertical;
  }
}


@mixin btn {
  display: inline-block;
  padding: 6px 12px;
  font-weight: normal;
  line-height: 1.42857143;
  text-align: center;
  white-space: nowrap;
  vertical-align: middle;
  -ms-touch-action: manipulation;
  touch-action: manipulation;
  cursor: pointer;
  -webkit-user-select: none;
  -moz-user-select: none;
  -ms-user-select: none;
  user-select: none;
  background-image: none;
  border: 1px solid transparent;
  border-radius: 4px;

  &:focus,
  &:active:focus,
  &.active:focus,
  &.focus,
  &:active.focus,
  &.active.focus {
    outline: 0px;
  }
}